<script setup>
import { ref, computed } from 'vue';

// 定义响应式数据
const activeIndex = ref('1');
const products = ref([
  { id: 1, name: 'IT社区文创：代码新秀闪耀徽章', price: 10, stock: 200, fileName: 'product01.png' },
  { id: 2, name: '极简主义帆布包', price: 50, stock: 100, fileName: 'product02.png' },
  { id: 3, name: '蓝字魔法，解锁IT新风尚—百搭T恤', price: 60, stock: 100, fileName: 'product03.png' },
  { id: 4, name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 30, stock: 50, fileName: 'product04.png' },
  { id: 5, name: '文创字母鼠标垫 IT技术社区专属', price: 15, stock: 50, fileName: 'product05.png' },
  { id: 6, name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 20, stock: 50, fileName: 'product06.png' },
]);
const cartItems = ref([]);

// 定义计算属性
const totalPrice = computed(() => {
  let total = 0;
  cartItems.value.forEach((item) => {
    total += item.quantity * item.price;
  });
  return total;
});

// 定义方法
const addToCart = (product) => {
  const existingItem = cartItems.value.find((item) => item.id === product.id);
  if (existingItem) {
    existingItem.quantity++;
  } else {
    cartItems.value.push({ ...product, quantity: 1 });
  }
};

const updateQuantity = (row) => {
  const index = cartItems.value.indexOf(row);
  cartItems.value[index] = { ...row };
};

const removeFromCart = (row) => {
  const index = cartItems.value.indexOf(row);
  cartItems.value.splice(index, 1);
};

const checkout = () => {
  if (totalPrice.value > 0) {
    alert(`结算成功，总价为：¥${totalPrice.value}。感谢您的购买！`);
    cartItems.value = [];
  } else {
    alert('购物车为空，无法结算');
  }
};
</script>

<template>
<el-container>
        
        
        <el-main>
            <div class="shop-container">
                <div class="product-list">
                    <el-row :gutter="20">
                        <el-col :xs="12" :sm="8" v-for="product in products" :key="product.id">
                            <el-card class="product-card">
                                <img :src="'./Static/images/' + product.fileName" alt="product image" class="product-image"/>
                                <div class="product-info">
                                    <h3>{{ product.name }}</h3>
                                    <p>价格: ¥{{ product.price }}</p>
                                    <p>库存: {{ product.stock }}</p>
                                    <el-button type="primary" @click="addToCart(product)">加入购物车</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="cart">
                    <h2>购物车</h2>
                    <div v-if="cartItems.length > 0">
                        <el-table :data="cartItems">
                            <el-table-column label="商品">
                                <template #default="scope">
                                    <div class="cart-item">
                                        <img :src="'./Static/images/' + scope.row.fileName" alt="product image" />
                                        <div>{{ scope.row.name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="单价"></el-table-column>
                            <el-table-column label="数量">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.quantity" :min="1" @change="updateQuantity(scope.row)"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button type="danger" @click="removeFromCart(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="total">
                            总价: ¥{{ totalPrice }}
                        </div>
                        <el-button type="primary" @click="checkout">结算</el-button>
                    </div>
                    <div v-else class="empty-cart">
                        暂无商品
                    </div>
                </div>
            </div>
        </el-main>
        
       
    </el-container>
</template>


<style scoped>
 .header-logo {
            display: flex;
            align-items: center;
        }
        .header-logo img {
            height: 60px;
        }
        .header-logo h2 {
            margin-left: 10px;
        }
        .header-nav {
            display: flex;
            align-items: center;
        }
        .header-search {
            margin-left: auto;
        }
        .header-user {
            display: flex;
            align-items: center;
        }
        .header-user img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }
        .content-section {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .section {
            width: 30%;
            position: relative; 
        }
        .section-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .card-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .card-item {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .card-item img {
            height: 100px;
            width: 100px;
            margin-bottom: 10px;
        }
        .card-item h3 {
            margin: 0;
            font-size: 16px;
        }
        .card-item p {
            margin: 5px 0;
            color: #909399;
        }
        .view-more {
            position: absolute;
            top: 10px; 
            right: 10px;
        }
        .product-carousel {
            width: 30%;
            position: relative; 
        }
        .product-carousel .view-more {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .shop-container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .product-list {
            width: 70%;
        }
        .cart {
            width: 25%;
        }
        .product-card {
            margin-bottom: 20px;
        }
        .product-image {
            width: 100%;
            height: auto;
        }
        .total {
            margin-top: 20px;
            font-weight: bold;
        }
        .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .cart-item img {
            height: 50px;
            width: 50px;
            margin-right: 10px;
        }
        .empty-cart {
            text-align: center;
            color: #909399;
        }
</style>